// 开放合作
.cooper-page{
	min-width: @main-width + 50 *2;
	.cooper-header-banner{
		height: 620px;
		background:#233240 url("../img/cooper_banner1.jpg") center center no-repeat;
		color: #fff;
		h2{
			font-size: 70px;
			text-align: center;
			padding-top: 230px;
		}
	}
	.cooper-tab-nav-wrap{
		height: 80px;
		line-height: 80px;
		background-color: #203142;
		text-align: center;
	}
	// tab
	.copper-tab-nav{
		.est-layout-page( @main-width );
		.clearfix();
		a{
			.inline-block();
			.transition(background-color 0.3s ease);
			float: left;
			width: 25%;
			color: #ffffff;
			font-size: 20px;
			text-decoration: none;
			&:hover{
				background-color: #005bac * 0.8;
			}
			&.active{
				background-color: #005bac;
			}
		}
	}
	.cooper-tab-content-wrap{
		.est-layout-page( @main-width );
		height: 521px;
		.cooper-tab-content{
			display: none;
			&.active{
				display: block;
			}
			.advan-list{
				.clearfix();
				li{
					.clearfix();
					float: left;
					width: 50%;
					padding-bottom: 68px;
					.advan-icon{
						.inline-block();
						.size(100px);
						.border-radius(50px);
						float: left;
						background-position: 0 0;
						background-repeat: no-repeat;
						background-image: url("../img/cooper_sprite.png");
						&.icon-house{
							background-color: #63c3ff;
							background-position: 0px -100px;
						}
						&.icon-money{
							background-color: #70f1c8;
							background-position: -100px -100px;
						}
						&.icon-com{
							background-color: #ff7173;
							background-position: 0px 0px;
						}
						&.icon-hand{
							background-color: #ffce55;
							background-position: -100px 0px;
						}
					}
					.advan-txt{
						float: left;
						width: 341px;
						margin-left: 40px;
						font-size: 14px;
						line-height: 26px;
						color: #303e4d;
					}
					.advan-special{
						padding:13px 0;
					}
				}
			}
		}
	}
	.cooper-title{
		text-align: center;
		font-size: 30px;
		color: #005bac;
		padding: 80px 0 60px;
		i{
			font-size: 16px;
			padding-left: 8px;
		}
	}

	// bar
	.cooper-bar{
		height: 450px;
		background: #203142 url("../img/cooper_banner2.jpg") center center no-repeat;
		.cooper-bar-txt{
			.est-layout-page( 521px );
			padding-top: 121px;
			color: #fff;
			text-align: center;
			p{
				font-size: 20px;
				&.bar-txt1{
					line-height: 30px;
				}
				&.bar-txt2{
					line-height: 62px;
				}
				&.bar-txt3{
					padding-bottom: 17px;
				}
			}
		}
	}

	// example 案例
	.cooper-example{
		@gap: 16px; // li之间的间隙
		@li-w: 345px;
		@total-width: (@li-w + @gap * 2) * 3px;
		.example-list{
			.est-layout-page( @total-width );
			.clearfix();
			li{
				.transition(background-color 0.3s ease-out );
				.box-sizing( border-box );
				float: left;
				width: @li-w;
				margin: 0 @gap 30px;
				padding: 10px 10px 20px;
				background-color: #f7f7f7;
				a{
					text-decoration: none;
				}
				.example-img-wrap{
					.size(100%, 200px);
					overflow:hidden;
					img{
						.transition( 0.3s ease-out );
						width: 100%;
						height: 100%;
					}
				}
				.example-title{
					.transition( 0.3s ease-out );
					font-size: 18px;
					line-height: 30px;
					color: #424242;
				}
				.example-content{
					.transition( 0.3s ease-out );
					font-size: 14px;
					line-height: 28px;
					color: #777777;
				}
				.example-detail{
					.transition( 0.3s ease-out );
					.inline-block();
					.size(75px, 26px);
					line-height: 26px;
					border: 1px solid #6b6b6b;
					text-decoration: none;
					color: #838383;
					font-size: 14px;
					text-align: center;
					margin-top: 15px;
					&:hover{
						text-decoration: underline;
					}
				}
				.example-center-title{
					text-align: center;
					font-size: 18px;
					padding-top: 20px;
					color: #303e4d;
					display: block;
				}
				&:hover{
					background-color: #005bac;
					.example-img-wrap{
						img{
							.transform( scale(1.2) );
						}
					}
					.example-title,
					.example-content,
					.example-detail{
						color: #ffffff;
						border-color: #fff;
					}
					.example-center-title{
						color: #fff;
					}
				}
			}
		}
	}
}